<template>
    <div class="song-list">
        <ul>
            <li v-for="song in songs" class="item" :key="song.id">
                <div class="content">
                    <h2 class="name">{{song.name}}</h2>
                    <p class="desc">{{getDesc(song)}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
      props: {
        songs: {
          type: Array,
          default: []
        }
      },
      methods: {
        getDesc (song) {
          return `${song.singer} 。${song.album}`
        }
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/variable"
    @import "~common/stylus/mixin"

    .song-list
         padding 20px 30px
         background $color-background
        .item
            display flex
            align-items center
            box-sizing border-box
            height 64px
            font-size $font-size-medium
            .rank
                flex 0 0 25px
                width 25px
                margin-right 30px
                text-align center
                .icon
                    display inline-block
                    width 25px
                    height 24px
                    background-size 25px 24px
                .text
                    color $color-theme
                    font-size $font-size-large
            .content
                flex 1
                line-height 20px
                overflow hidden
                .name
                    no-wrap()
                    color $color-text
                .desc
                    no-wrap()
                    margin-top 4px
                    color $color-text-d
                    font-size $font-size-small
</style>